@charset 'UTF-8';
@import 'compass/css3/transition';

.app__body .popover.channel-header__popover {
    box-shadow: none;
}

.header-popover-text-measurer {
    position: absolute;
    visibility: hidden;
    height: auto;
    width: auto;
    white-space: nowrap;
}

.app__body {
    .popover {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
        border-color: v(center-channel-color-16);
    }
}

.popover {
    @include border-radius($border-rad * 2);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    color: lighten($black, 25%);
    font-family: inherit;
    padding: 0;

    .app__body & {
        border: 1px solid v(center-channel-color-16);
    }

    &.channel-header__popover {
        z-index: 999;
        margin-left: -4px;
        font-size: 12px;

        &.chanel-header__popover--lhs_offset {
            margin-left: 61px;

            &.chanel-header__popover--new_sidebar {
                margin-left: 81px;
            }
        }

        &.chanel-header__popover--new_sidebar {
            margin-left: 16px;
        }

        .popover-content {
            padding: 1px 3px;

            p {
                white-space: normal;
                word-break: normal;

                &:last-child {
                    margin-bottom: 0;
                }
            }
        }

        &.bottom {
            margin-top: -11px;
        }
    }

    &.bottom,
    &.right,
    &.top,
    &.left {
        > .arrow {
            display: none;

            &:after {
                border-color: transparent;
            }
        }
    }

    &.bottom {
        margin-top: 10px;
    }

    ul + p,
    ol + p {
        margin-top: .6em;
    }

    p + ul,
    p + ol {
        margin-top: .6em;
    }

    blockquote {
        padding-bottom: 0;
    }

    .popover-title {
        @include border-radius(0);
        background: alpha-color($black, .05);
        max-width: 100%;
        overflow: hidden;
        padding: 8px 10px;
        text-overflow: ellipsis;
        border-color: v(center-channel-color-08);

        > span {
            display: flex;
            justify-content: space-between;
        }
    }

    hr {
        &.divider {
            margin: 8px 0;
        }

        &.divider--expanded {
            margin: 8px -15px;
        }
    }

    .popover-content {
        word-break: break-word;

        p {
            &:last-child {
                margin-bottom: 5px;
            }
        }
    }

    .popover__row {
        margin: 0 -15px 0;
        padding: 9px 15px 0;

        &.first {
            border-top: 1px solid transparent;
            margin-top: 4px;
        }

        > a {
            i {
                margin-right: 5px;
            }
        }
    }
}

.channel-header__info {
    .popover-content {
        max-height: 250px;
        overflow: auto;
    }
}

.user-popover {
    cursor: pointer;
    display: inline-block;
}

.code-popover {
    .popover-content {
        padding: 5px;
    }
}

.user-popover__username,
.user-popover__username > a {
    display: inline-block;
    max-width: 150px;
    height: 17px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-profile-popover .user-popover__username:only-child,
.user-profile-popover .user-popover__username:only-child > a{
    max-width: 100%;
}
.user-profile-popover .Avatar {
    margin: 5px auto;
    display: block;
}

.app__body {
    .user-profile-popover {
        border: 1px solid v(center-channel-color-20);
        box-shadow: none !important;
        background: transparent !important;

        .popover-title {
            border-bottom: 1px solid v(center-channel-color-20);
            border-radius: $border-rad $border-rad 0 0;
            background: v(center-channel-bg);
            position: relative;

            &:before {
                position: absolute;
                background: v(center-channel-color-04) !important;
                content: '';
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
            }

            span {
                z-index: 1;
                position: relative;
            }
        }

        .popover-content {
            border-radius: 0 0 3px 3px;
            border-top: none;
            @include box-shadow(v(center-channel-color-08) 0px 17px 50px 0px, v(center-channel-color-08) 0px 12px 15px 0px);
            background: v(center-channel-bg);
        }
    }
}

.user-popover__role {
    padding: 3px 5px;
    margin-left: 10px;
    background-color: $gray;
    border-radius: 4px;
    font-weight: bold;
    font-size: 0.8em;
    color: $white;
}


.user-popover__email {
    display: block;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hidden-label + .search-autocomplete__divider {
    &:before {
        display: none;
    }
}

.search-autocomplete__icon {
    width: 2.4rem;
    height: 2.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.search-autocomplete__divider {
    font-size: 12px;
    color: v(center-channel-color-60);
    height: 2.8rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 1.2rem 0 0;
    padding: 0 0 0 2.4rem;
    position: relative;
    text-transform: uppercase;
    font-weight: 600;

    &:first-child {
        &:before {
            display: none;
        }
    }

    &:before {
        content: '';
        height: 1px;
        background: v(center-channel-color-08);
        position: absolute;
        top: -7px;
        left: 0;
        width: 100%;
    }
}

.search-autocomplete__name {
    text-overflow: ellipsis;
    overflow: hidden;
}

.search-help-popover {
    max-width: 350px;
    top: 25px;
    @include opacity(0);
    visibility: hidden;
    width: 296px;
    left: auto;
    right: -2px;

    &.autocomplete {
        display: block;

        .popover-content {
            max-height: 60vh;
            padding: 0 0 12px;
            position: relative;
            -webkit-overflow-scrolling: touch;
            overflow-x: hidden;

            &::-webkit-scrollbar-track {
                width: 0;
            }

            &::-webkit-scrollbar-thumb {
                border: 1px solid v(center-channel-bg);
                background-color: v(center-channel-color-24) !important;
                border-radius: 4px;
            }
        }
    }

    .search-autocomplete__item {
        @include border-radius(2px);
        cursor: pointer;
        display: flex;
        align-items: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        height: 4rem;
        padding: 0 2.4rem;

        &.selected {
            background: v(center-channel-color-08);
            box-shadow: none;
        }

        .status--group {
            background-color: v(center-channel-color-20);
            margin: 0;
            width: 1.8rem;
            height: 1.8rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .mention--align {
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .fa {
            @include opacity(.5);
            margin-right: 5px;
            top: 1px;
            position: relative;
        }
    }

    &.bottom > .arrow {
        border-width: 9px;
        left: 30px;
        top: -18px;
    }

    .popover-content {
        max-height: 500px;
        overflow: auto;
        padding: 0;
    }

    h4 {
        font-size: 1.4rem;
        margin-top: 0;
    }

    ul {
        span {
            @include opacity(.8);
        }

        strong,
        b {
            @include opacity(1);
        }
    }

    .tooltip-inner {
        max-width: 100%;
    }

    body.enable-animations & {
        @include transition-property(opacity, visibility);
        @include transition-duration(0.1s);
        @include transition-delay(0s);
        @include transition-timing-function(ease-in, step-end);
}

    &.visible {
        @include opacity(1);
        visibility: visible;

        body.enable-animations & {
            @include transition-property(opacity, visibility);
            @include transition-duration(0.3s);
            @include transition-delay(0.2s);
            @include transition-timing-function(ease-out, step-start);
        }

        body.enable-animations .sidebar--right & {
            @include transition-property(opacity, visibility);
            @include transition-duration(0.3s);
            @include transition-delay(0s);
            @include transition-timing-function(ease-out, step-start);
        }
    }
}

.member-list__popover {
    margin-left: -95px;
    max-width: initial;

    .more-modal__body {
        border-bottom: 1px solid transparent;
        border-top: 1px solid transparent;
        max-height: 275px;
        overflow: auto;
        position: relative;
    }

    .more-modal__header {
        padding: 14px 20px;

        .icon {
            @include opacity(.8);
            margin: 0 38px 0 24px;
            position: relative;
            top: 2px;
        }

        span {
            font-weight: 600;
        }

        .subhead {
            font-size: 12px;
            opacity: 0.6;
            span {
                font-weight: normal;
            }
        }
    }

    .more-modal__button {
        .btn {
            height: 42px;
        }
    }

    .more-modal__list {
        .more-modal__row {
            border: none;
            cursor: pointer;
            height: 50px;
            margin: 1px 0;
            overflow: hidden;
            padding: 0 12px 0 20px;

            .more-modal__actions {
                opacity: 1;
                padding: 0;
                margin-left: 12px;

                button {
                    @include border-radius(4px);
                    opacity: 0;
                    line-height: 0;
                    width: 2em;
                    height: 2em;

                    &:hover {
                        background-color: v(button-bg-24);
                    }

                    &:active {
                        background-color: v(button-bg-32);
                    }

                    &.a11y--focused {
                        opacity: 1;
                    }
                }
            }

            &:hover {
                border-left: 3px solid transparent;
                padding-left: 17px;

                .more-modal__actions {
                    button {
                        @include opacity(1);
                    }
                }

                .more-modal__name {
                    font-weight: 600;
                }
            }

            &.more-modal__row--button {
                border-left: none;
                height: 40px;
                position: relative;

                button {
                    font-weight: 500;
                    height: 100%;
                    left: 0;
                    position: absolute;
                    top: 0;
                    width: 100%;
                }
            }
        }

        .more-modal__name {
            display: block;
            font-size: 13.5px;
            font-weight: normal;
        }

        .more-modal__image {
            margin: 0;
            position: relative;
            top: -1px;
        }

        .more-modal__details {
            line-height: 39px;
            padding-left: 16px;
        }

        .more-modal__actions {
            @include opacity(0);
            line-height: 42px;
            margin: 0;

            .icon {
                position: relative;
                top: 2px;
            }
        }
    }

    .popover-content {
        max-height: 380px;
        padding: 0;
        position: relative;
        width: 260px;

        .text-nowrap {
            font-size: 13px;
            line-height: 26px;
            overflow: hidden;
            padding: 6px 10px;
            width: 100%;
        }

        .more__name {
            margin-left: 6px;
            max-width: 140px;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
}

.channel_search {
    display: flex;

    .search_input {
        flex: 1;
        margin-left: 16px;
        margin-right: 16px;
    }

    .create_button {
        margin-right: 16px;
    }
}
